<template>
  <div>

    <!--头部-->
    <Header></Header>
    <!--头部-->


    <!--文章咨询详情路径导航布局区-->
    <div class="article">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/index">招聘新闻</a></el-breadcrumb-item>
        <el-breadcrumb-item>{{article.title}}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>

    </div>
    <!--文章咨询路径导航布局区-->

    <!--新闻咨询布局区-->
    <div class="article">
      <el-row :gutter="20">
        <!--新闻咨询咨询展示区-->
        <el-col :span="16">
          <!--新闻咨询的卡片区-->
          <el-card style="height: 100%">

            <div slot="header" class="clearfix">
              <span>新闻咨询详情</span>
            </div>

            <!-- 新闻咨询-->
            <div class="content">
              <div class="title">{{article.title}}</div>
              <div class="date">
                <span>发布时间：{{article.created}}</span>
                <span>作者：{{article.author}}</span>
                <span>浏览量：{{article.views}}</span>
              </div>
              <div class="txt">
                <mavon-editor :value="article.content"
                              :toolbarsFlag="false"
                              :subfield="false"
                              :shortCut="false"
                              :autofocus="false"
                              :ishljs="true"
                              :boxShadow="false"
                              previewBackground="#FFFFFF"
                              defaultOpen="preview">
                </mavon-editor>
              </div>
            </div>
            <!-- 新闻咨询-->
          </el-card>
          <!--新闻咨询的卡片区-->
        </el-col>
        <!--文章咨询展示区-->

        <!--右侧展示区-->
        <el-col :span="8">


          <!--热点文章的卡片区-->
          <el-row :gutter="20">
            <HotArticle></HotArticle>
          </el-row>
          <!--热点文章的卡片区-->


        </el-col>
        <!--右侧展示区-->

      </el-row>
    </div>
    <!--新闻咨询布局区-->


    <!--尾部-->
    <Footer></Footer>
    <!--尾部-->
  </div>
</template>

<script>

import '../assets/css/styles.css'
import Header from "@/front/inc/Header";
import Footer from "@/front/inc/Footer";
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import Vue from 'vue'
import HotArticle from "@/front/inc/HotArticle";
import {getArticleDetail} from '@/api/article';
Vue.use(mavonEditor)
export default {
  name: "NewDetail",
  components: {HotArticle, Footer,Header},
  mounted() {
    this.findArticleById(this.$route.params.id);
  },
  data() {
    return {

      article:{}//文章详情
    }

  },
  methods:{
    findArticleById(id){
      getArticleDetail(id).then(res=>{
        this.article = res.data
      })

    }
  }

}
</script>

<style scoped>

</style>
